import React from 'react';
import styles from './ProductCollection.module.css'
import { Row, Col, Divider } from 'antd';
import { ProductImage } from './ProductImage'

interface PropsType {
  title: JSX.Element,
  sideImage: string,
  products: any[]
}

export const ProductCollection: React.FC<PropsType> = ({ title, sideImage, products }) => {
  console.log(products, "41241")
  return (
    <div className={styles.content}>
      <Divider orientation='left'>
        {title}
      </Divider>
      <Row>
        <Col span={4}>
          <img src={sideImage} className={styles['side-image']} alt="" />
        </Col>
        <Col span={20}>
          <Row>
            <Col span={12}>
              {products.length > 0 && <ProductImage
                id={products[0].id}
                size={'large'}
                title={products[0].name}
                imageSrc={products[0].titleUrl}
                price={products[0].pDesc}
              />}
            </Col>
            <Col span={12}>
              <Row>
                <Col span={12}>
                  {products.length > 0 && <ProductImage
                    id={products[1].id}
                    size={'small'}
                    title={products[1].name}
                    imageSrc={products[1].titleUrl}
                    price={products[1].pDesc}
                  />}
                </Col>
                <Col span={12}>
                  {products.length > 0 && <ProductImage
                    id={products[2].id}
                    size={'small'}
                    title={products[2].name}
                    imageSrc={products[2].titleUrl}
                    price={products[2].pDesc}
                  />}
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  {products.length > 0 && products.length > 3 && <ProductImage
                    id={products[3].id}
                    size={'small'}
                    title={products[3].name}
                    imageSrc={products[3].titleUrl}
                    price={products[3].pDesc}
                  />}
                </Col>
                <Col span={12}>
                  {products.length > 0 && products.length > 4 && <ProductImage
                    id={products[4].id}
                    size={'small'}
                    title={products[4].name}
                    imageSrc={products[4].titleUrl}
                    price={products[4].pDesc}
                  />}
                </Col>
              </Row>
            </Col>
          </Row>
          <Row>
            <Col span={6}>
              {products.length > 0 && products.length > 5 && <ProductImage
                id={products[5].id}
                size={'small'}
                title={products[5].name}
                imageSrc={products[5].titleUrl}
                price={products[5].pDesc}
              />}
            </Col>
            <Col span={6}>
              {products.length > 0 && products.length > 6 && <ProductImage
                id={products[6].id}
                size={'small'}
                title={products[6].name}
                imageSrc={products[6].titleUrl}
                price={products[6].pDesc}
              />}
            </Col>
            <Col span={6}>
              {products.length > 0 && products.length > 7 && <ProductImage
                id={products[7].id}
                size={'small'}
                title={products[7].name}
                imageSrc={products[7].titleUrl}
                price={products[7].pDesc}
              />}
            </Col>
            <Col span={6}>
              {products.length > 0 && products.length > 8 && <ProductImage
                id={products[8].id}
                size={'small'}
                title={products[8].name}
                imageSrc={products[8].titleUrl}
                price={products[8].pDesc}
              />}
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  )
}
